<!--  -->
<template>
  <div  class="orderhoet2" >
    <div v-if="commList.length > 0">
      <div v-for="(item,i) in commList" :key='i'>
      <div class="goods-rated">
        <h3>{{item.has_one_comment && item.has_one_comment.content}}</h3>
        <div class="goods-rate flex-a-c">
          <div class="rate flex-a-c">
            <h4>评分：</h4>
            <van-rate v-model="item.has_one_comment.level" readonly   :size="12" :color="'var(--themeBaseColor)' || '#E32323'"/>
          </div>
          <div class="option-right flex-a-c">
            <div v-if="item.goods_option_title">规格: {{item.goods_option_title}},</div>
            <div class="option total">X{{item.total}}</div>
          </div>
        </div>
        <div class="goods-wrap flex">
          <img :src="item.thumb" class="images" />
          <div class="info-wrap flex-a-c flex-j-sb">
            <h4 class="pl">{{item.title|escapeTitle}}</h4>
            <h5>{{$i18n.t('money')}} {{item.price}}</h5>
          </div>
        </div>
        <div class="btn-group flex">
          <div class="goods-btn evaluate" @click="opration({},item)">
            查看评价
          </div>
          <block v-for="(btn,index) in item.buttons" :key="index">
            <div class="goods-btn" v-if="btn.name != '查看评价'" @click="opration(btn,item)" >
              {{btn.name}}
            </div>
          </block>
        </div>
        
      </div>
    </div>
    </div>
    <van-empty description="暂无数据"  v-else/>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
name:'',
props:{
  commList:{
    type:Array,
    default:() => {
      return []
    }
  }
},
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
  return {
    toi: this.fun.getKeyByI()
  };
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  opration(btn, item) {
    //value-1 追加评价value-2 查看评价详情
    if (btn.value == 1) {
      this.$router.push({ name: "addevaluate", params: { goods_id: item.goods_id, order_id: item.order.id,id:item.id },query: { i: this.toi }});
    } else {
      //CommentDetails
      this.$router.push({
        name: "CommentDetails",
        params: {
          order_id: item.order.id,
          goods_id: item.goods_id,
          comment_id: item.has_one_comment.id,
          order_goods_id: item.id,
          uid: 0
        },
        query: { i: this.toi }
      });
    }
  },
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.orderhoet2,
.orderhoet3 {
  margin-bottom: 0;
}
.goods-rated {
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    padding:0.75rem;
    margin: 0 0 0.5rem 0;
    h3 {
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.25rem;
      color: #333333;
      text-align: left;
      padding:0 0 1.25rem 0;
      word-wrap: break-word;
      white-space: pre-wrap;
    }
    .goods-rate {
      padding: 0 0 0.75rem 0;
      .rate {
        flex:1;
        h4 {
          font-size: 0.75rem;
          font-weight: 400;
          line-height: 1.0625rem;
          color: #999999;
        }
      }
      .option-right {
        flex:1;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.0625rem;
        color: #999999;
        .total {
          padding: 0 0 0 0.1875rem;
        }
      }
    }
    .goods-wrap {
      background-color: #F5F5F5;
      border-radius: 0.125rem;
      width:100%;
      .info-wrap {
        width:87%;
        
        // flex:2;
        box-sizing: border-box;
        padding: 0 0.75rem 0 0;
        h4 {
          max-width:70%;
          font-size: 0.8125rem;
          font-weight: 400;
          line-height: 1.1875rem;
          color: #666666;
          text-align: left;
        }
        h5 {
          width:30%;
          font-size: 0.8125rem;
          font-weight: bold;
          line-height: 1.1875rem;
          color: #333333;
          text-align: right;
        }
      }
      .images {
        width: 2.1875rem;
        height: 2.1875rem;
        margin:0 0.5rem 0 0;
        border-radius: 0.125rem 0rem 0rem 0.125rem;
      }
    }
    .btn-group {
      padding:0.75rem 0 0 0;
      justify-content: flex-end;
    }
    .goods-btn {
      min-width: 3.8125rem;
      box-sizing: border-box;
      padding:0.25rem 1.125rem;
      border: 0.0625rem solid #D6D6DC;
      border-radius: 1.125rem;
      font-weight: 400;
      font-size: 0.75rem;
      line-height: 1.0625rem;
      color: #AAAAB3;
      margin:0 0 0 0.75rem;
      cursor: pointer;
    }
    .evaluate {
      padding:0.25rem 0.375rem;
    }
}
</style>